.base {
  position: relative;
  z-index: var(--slide-stack-order);
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: var(--slide-width);
  width: 100%;
  transform: translate3d(var(--slide-transform-x), 0, 0);
  backface-visibility: hidden;
}

.inner {
  overflow: hidden;
  will-change: width;
}

@keyframes slide-in {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes slide-out {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

.animate-in {
  animation-name: slide-in;
  animation-duration: var(--slide-animation-duration);
  animation-timing-function: var(--cui-transitions-slow);
  animation-fill-mode: forwards;
}

.animate-out {
  animation-name: slide-out;
  animation-duration: var(--slide-animation-duration);
  animation-timing-function: var(--cui-transitions-slow);
  animation-fill-mode: forwards;
}

.content {
  width: var(--slide-width);
}
